
var bannerCom = Vue.extend({

    data() {
        return {
            menu: [{
                name: '首页',
                url: '/home'
            }, {
                name: '关于我们',
                url: '/about'
            }, {
                name: '产品信息',
                url: '/goods',
                children:[
                    {
                        name: '产品A',
                        url: '/goods/10001',
                    },
                    {
                        name: '产品B',
                        url: '/goods/10002',
                    },
                    {
                        name: '产品C',
                        url: '/goods/10003',
                    },
                    {
                        name: '产品D',
                        url: '/goods/10004',
                    },
                ]
            }, {
                name: '新闻信息',
                url: '/news',
                children:[
                    {
                        name: '新闻信息A',
                        url: '/news/10001',
                    },
                    {
                        name: '新闻信息B',
                        url: '/news/10002',
                    },
                    {
                        name: '新闻信息C',
                        url: '/news/10003',
                    },
                    {
                        name: '新闻信息D',
                        url: '/news/10004',
                    },
                ]
            }, {
                name: '联系我们',
                url: '/contact'
            }, ],
        };
    },
    mounted: function() {
        this.$nextTick(function() {//this.TouchSlide();
            this.mainSlider();

        });
    },
    methods: {

        menuData:function(){
            localStorage.setItem('menuData',JSON.stringify(this.menu));
        },

        mainSlider:function () {
            $('#main-slider').slick({
                dots: false,
                infinite: true,
                fade: true,
                speed: 1000,
                autoplaySpeed: 3000,
                lazyLoad: 'progressive',
                cssEase: 'linear',
                adaptiveHeight:true,
                autoplay: true,
                prevArrow: '<i class="fa fa-angle-right"></i>',
                nextArrow: '<i class="fa fa-angle-left"></i>',
                responsive: [
                    {
                        breakpoint: 991,
                        settings: {
                            arrows: false
                        }
                    }
                ]
            });
        },


    },
    props: [''],
    template: '\
<div class="main-slider-wrapper clearfix">\
    <div id="main-slider">\
        <div class="slide"><img src="assets/images/slider/1.jpg" alt="Slide"></div>\
        <div class="slide"><img src="assets/images/slider/2.jpg" alt="Slide"></div>\
        <div class="slide"><img src="assets/images/slider/3.jpg" alt="Slide"></div>\
        <div class="slide"><img src="assets/images/slider/4.jpg" alt="Slide"></div>\
    </div>\
    <div id="slider-contents">\
        <div class="container text-center">\
            <div class="jumbotron">\
                <h1>Find Your Dream House</h1>\
                <div class="contents clearfix">\
                    <p>If you dream of designing a new home that takes full advantage of <br>\
                        the unique geography and views of land that you love</p>\
                </div>\
                <a class="btn btn-warning btn-lg btn-3d" data-hover="Our Services" href="#" role="button">Our Services</a>\
                <a class="btn btn-default btn-border btn-lg" href="#" role="button">Get a Quote</a>\
            </div>\
        </div>\
    </div>\
</div>\
',

});
